<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: MOZZ
  Date: 2021/12/14
  Time: 22:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="tags" scope="request" value="${requestScope.tags}" />
<c:set var="blogs" scope="request" value="${requestScope.blogs}" />
<c:set var="selected" scope="request" value="${requestScope.selected}" />

<html>

<head>
    <title>Title</title>
    <link rel="stylesheet" href="public/css/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="public/css/tags.css">
    <link rel="stylesheet" href="public/css/iconfont.css" />
    <link rel="stylesheet" href="public/css/markdown.css">
    <link rel="stylesheet" href="public/css/layout/header.css">
</head>

<body>
    <div class="tar-bar">
        <div class="left-box">
            <div class="menu-item">
                <a href="codeBlog"><span class="iconfont icon-home"></span>首页</a>
            </div>
            <div class="menu-item">
                <a href="timeline.jsp?userId=${user.id}"><span class="iconfont icon-time-line"></span>时间轴</a>
            </div>
            <div class="menu-item">
                <a href="TagsServlet"><span class="iconfont icon-tag"></span>标签</a>
            </div>
            <div class="menu-item">
                <span class="iconfont icon-about"></span> 关于
            </div>
        </div>
        <div class="right-box">
            <div class="menu-item">
                <a href="CategoryServlet?userId=${user.id}"><span class="iconfont icon-folder-open"></span>分类</a>
            </div>
            <c:if test="${user!=null}">
                <div class="menu-item">
                    <!-- <span><a href="UserHomeServlet?userId=${user.id}"><c:out value="${user.nickName}"/></a></span>
                    <div class="avatar-box">
                        <img class="avatar" src="uploads/avatar/${user.avatar}" alt="">
                    </div> -->
                    <a href="UserHomeServlet?userId=${user.id}"><span class="iconfont icon-user"></span>个人中心</a>
                </div>
            </c:if>
            <c:if test="${user==null}">
                <div class="menu-item">
                    <a href="login.jsp"><button class="btn btn-success">登录</button></a>
                </div>
            </c:if>
            <div class="menu-item public-btn">
                <a href="add_blog.jsp"><button class="btn">发表博客</button></a>
            </div>
        </div>
    </div>
    <div class="banner">
        <div class="banner-bg"></div>
        <div class="type-box">
            <div id="typeWriter"></div>
            <span class="cursor"></span>
        </div>
    </div>
    <div class="container">
        <div class="tag-box">
            <c:if test="${selected!=null}">
                <c:forEach var="item" items="${tags}">
                    <div class="tag <c:if test=" ${item.id==selected}">active
            </c:if> " name="${item.id}">
            <button class="btn">
                <span class="iconfont icon-tag"></span>
                <span>
                    <c:out value="${item.name}" /></span>
                <span class="count">
                    <c:out value="${item.count}" /></span>
            </button>
        </div>
        </c:forEach>
        </c:if>
        <c:if test="${selected==null}">
            <c:forEach var="item" items="${tags}" varStatus="tagStatus">
                <div class="tag <c:if test=" ${tagStatus.index}==1">active
        </c:if> " name="${item.id}">
        <button class="btn">
            <span class="iconfont icon-tag"></span>
            <span>
                <c:out value="${item.name}" /></span>
            <span class="count">
                <c:out value="${item.count}" /></span>
        </button>
    </div>
    </c:forEach>
    </c:if>

    </div>
    <div class="center-box">
        <c:if test="${blogs.size()==0}">暂无博客</c:if>
        <c:forEach var="item" items="${blogs}">
            <div class="item-box">
                <div class="item-title">
                    <a href="BlogDetailServlet?id=${item.id}">
                        <c:out value="${item.title}" /></a>
                </div>
                <div class="item-content" id="markdown-box">
                    ${item.content}
                </div>
                <div class="icon-box">
                    <div class="item-user"><span class="iconfont icon-user"></span>
                        <c:out value="${item.user.nickName}" />
                    </div>
                    <div class="item-public-time"><span class="iconfont icon-calendar"></span>
                        <fmt:formatDate pattern="yyyy/MM/dd" value="${item.publicTime}" />
                    </div>
                    <c:if test="${item.tags.size()>0}">
                        <div class="item-tags"><span class="iconfont icon-tag"></span>
                            <c:forEach var="tag" items="${item.tags}">
                                <span><a href="TagsServlet?tagId=${tag.id}">
                                        <c:out value="${tag.name}" /></a></span>
                            </c:forEach>
                        </div>
                    </c:if>

                </div>
            </div>
        </c:forEach>
    </div>
    </div>
</body>
<script src="public/js/jquery/jquery.js"></script>
<script src="public/js/typewriter.js"></script>

<script>
    // 点击发送ajax请求，获取标签的所有博客
    $('.tag-box .tag').on('click', function (e) {
        // 保存 type 信息
        var tagId = $(this).attr('name')
        // 更改样式
        $('.tag-box .tag').each(function () {
            $(this).removeClass('active')
        })
        $(this).addClass('active')

        // 清空
        $('.center-box').html("")

        var html = `
    <div class="item-box">
                  <div class="item-title">
                      <a href="BlogDetailServlet?id={{id}}">{{title}}</a>
                  </div>
                  <div  class="item-content" id="markdown-box">
                      {{content}}
                  </div>
                  <div class="icon-box">
                      <div class="item-user"><span class="iconfont icon-user"></span>
                          {{nickName}}
                      </div>
                      <div class="item-public-time"><span class="iconfont icon-calendar"></span>
                          {{publicTime}}
                      </div>
                          <div class="item-tags">
                            {{tags}}
                          </div>

                  </div>
              </div>
    `

        let tagHtml = `
    <span class="iconfont icon-tag"></span>
    <span>{{tagName}}</span>
    `

        // 发送 ajax 请求
        $.ajax({
            async: true,
            url: 'QueryBlogsByTagIdServlet',
            data: {
                tagId: tagId
            },
            success: function (ret) {
                console.log(ret)
                ret.forEach(item => {
                    let target = html
                    let targetTag = ''

                    target = target.replace('{{id}}', item.id)
                        .replace('{{title}}', item.title)
                        .replace('{{content}}', item.content)
                        .replace('{{nickName}}', item.user.nickName)
                        .replace('{{publicTime}}', new Date(item.publicTime)
                            .toLocaleDateString())
                    item.tags.forEach(tag => {
                        targetTag += tagHtml.replace('{{tagName}}', tag.name)
                    })
                    target = target.replace("{{tags}}", targetTag)
                    $('.center-box').append(target)
                })
                // if (ret.success === false) {
                //   return alert('false')
                // }
                // $(ret.data).each(function (index) {
                //   $that = $(this)[0]
                //   target = html
                //   target = target.replace('{{id}}', $that._id)
                //     .replace('{{title}}', $that.title)
                //     .replaceAll('{{time}}', new Date($that.createTime).toLocaleString().split(' ')[0])
                //     .replace('{{description}}', $that.description)
                //     .replace('{{username}}', $that.userId.username)
                //     .replace('{{type}}', $that.type)
                //   $('.notes').append(target)
                // })
            },
            error: function (err) {
                alert(err.message)
            }
        })
    })
</script>

</html>